---
title: Generative UI
icon: "lucide/Sparkles"
description: Create dynamic, AI-driven user interfaces that adapt and respond to user interactions and agent state.
---
import { IntegrationsGrid } from "@/components/react/integrations";

## What is Generative UI?

Generative UI is a paradigm where user interface components are dynamically created, modified, or updated by AI agents based on context, user interactions, and application state. Instead of static, pre-defined interfaces, Generative UI creates adaptive experiences that evolve in real-time.

<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/langgraph/agentic-generative-ui.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />

This approach enables AI agents to not just respond with text, but to create rich, interactive experiences tailored to each user's specific needs and context.

<Callout title="Ready to Implement Generative UI?">
Generative UI can be implemented with any Agent Framework, with each framework offering different approaches for creating dynamic, AI-driven interfaces.

**Choose your integration to see framework-specific implementation guides and examples.** 
<IntegrationsGrid targetPage="generative-ui" />
</Callout>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">

<div>

## Key Features

### **Dynamic Component Generation**
AI agents create UI components in real-time based on context, user needs, and application state.

### **Real-time State Visualization**
Interfaces update dynamically as agent state changes, providing live feedback and progress visibility.

### **Interactive Elements**
Move beyond text responses to create forms, visualizations, buttons, and custom interactive components.

### **Contextual Adaptation**
UI components adapt to current conversations and user context, providing exactly the right interface at the right time.

### **Rich Data Visualization**
Charts, graphs, and visual representations that update in real-time as agents process data.

### **Multi-modal Interfaces**
Support for various UI patterns including forms, workflows, progressive disclosure, and embedded actions.

</div>

<div>

## When to Use Generative UI

Consider Generative UI when you want to:

- **Create rich user interactions** beyond simple text exchange
- **Build dynamic data collection** with forms that adapt to context
- **Provide real-time feedback** showing agent progress and state
- **Design complex workflows** that benefit from guided interfaces
- **Enable data visualization** that updates based on agent analysis
- **Increase user engagement** through interactive elements
- **Offer contextual actions** that change based on current application state

</div>

</div> 